<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js" type="text/javascript"charset="utf-8"></script>
    </head>

    <body>
        <!-- view -->
        <div id="app">
            <!-- v-model表示视图模型双向绑定 -->
            请输入文本: <input type="text" v-model="message"> {{message}}
            <br/>

            性别:
            <input type="radio" name="sex" value="男" v-model="choosed">男
            <input type="radio" name="sex" value="女" v-model="choosed">女
            选中了: {{choosed}}

            <br/>
            下拉菜单:
            <select name="" v-model="select">
              <option value="" disabled>--请选择--</option>
              <option value="1">A</option>
              <option value="2">B</option>
              <option value="3">C</option>
              <option value="4">D</option>
            </select>
            <span>先择了：{{select}}</span>
        </div>


        <script type="text/javascript">
            let app = new Vue({
                el: "#app",
                data: {
                  message: "haha",
                  choosed: "",
                  select: ""
                }
            })
        </script>
    </body>
</html>